<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/scrollbar.css">
<!-- 响应式表格 -->
<div class="table-responsive">
    <table class="table table-bordered table-hover table-condensed ">
        <thead>
            <tr class="active">
                <th>ID</th>
                <th>商品名称</th>
                <th>商品封面</th>
                <th>商品价格</th>
                <th>市场价格</th>
                <th>分类</th>
                <td>品牌</td>
                <th>累计销量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script src="../assets/js/jquery.js"></script>
    <script>
        // 删除商品
        function del(id){
            $.get('../apis/index.php?c=Product&a=del',{id},function(res){
                if(res.errcode==0){
                    alert('删除成功');
                    location.reload();
                }
            },'json');
        }
        // 商品详情
        function detail(id){
            if(id>0){
                location.href=`./product-edit.html?id=${id}`;
            }else{
                alert('参数错误');
            }
            
        }
        $(function () {

            // 获取商品列表
            $.post('../apis/index.php?c=Product&a=index', {}, function (res) {
                var html = '';
                // console.log(res);
                res.list.forEach(function(item,index){
                    html += `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>
                            <img src="${item.cover}" style="height:60px">
                            </td>
                            <td>&yen;${item.price}</td>
                            <td>&yen;${item.market_price}</td>
                            <td>${item.category}</td>
                            <td>${item.brand}</td>
                            <td>${item.sales_volume}</td>
                            <td>
                                <button class="btn btn-success btn-xs" onclick="detail(${item.id})">编辑</button>
                                <button class="btn btn-danger btn-xs" onclick="del(${item.id})">删除</button>
                            </td>
                        </tr>
                    `;
                });

                $('tbody').html(html);
            },'json');

           
        }); 
    </script>
</div>